<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!--    先导入vue-->
    <script src="js/vue.js"></script>
    <!--    element样式文件-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!--    element的脚本-->
    <script src="element-ui/lib/index.js"></script>
    <!--    导入axios-->
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <el-card style="width: 500px;margin: 0 auto">
        <el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="rules">
            <h1 style="text-align: center">社区物业管理系统</h1>
            <el-form-item label="登录名" prop="username">
                <el-input required v-model="loginForm.username" placeholder="请输入登录名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input required type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button ref="loginButton" type="primary" @click="submitForm">立即登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data() {
            return {
                loginForm: {
                    username: '',
                    password:''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger:
                                'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger:
                                'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.loginForm.validate(valid=>{
                    if(valid){
                        //让按钮不可用
                        this.$refs.loginButton.disabled=true;
                        //设置5秒后再可用 不影响axios表单提交，因为setTimeout算是再开了一个线程让按钮禁用
                        setTimeout(()=>{
                            this.$refs.loginButton.disabled=false;
                        },5000);
                        //执行登录
                        axios.post('/user/login',this.loginForm).then(resp=>{
                            //登录成功后
                            let user=resp.data;
                            //保存用户名和用户ID
                            localStorage.setItem("username",user.username);
                            localStorage.setItem("userId",user.id);
                            //显示登录成功
                            this.$message.success(`欢迎您${user.username},登陆成功`);
                            //2秒后跳转
                            setTimeout(()=>{
                                //进行页面跳转
                                location.href="pages/main.html"
                            },2000);
                        }).catch(error=>{
                            console.log(error);
                            this.$message.error(`登录失败,${error.response.data}`);
                        });
                    }else{
                        return false;
                    }
                })
            }
        }
    });
</script>
</body>
</html>